<template>
	<view class="big">
		<view class="Shopping"
			style="position: fixed;width: 60rpx;border-radius: 50%; height: 60rpx;background: #007AFF; z-index: 10; top: 685rpx;right: 15rpx;">
			<image src="/static/images/gift.png" mode=""
				style="width: 30rpx; height: 30rpx; background-color: #E43D33';"></image>
		</view>
		<view class="home">
			<!-- 滑块视图容器。 -->
			<swiper indicator-dots circular autoplay interval="3000">
				<!-- 轮播的每一项 -->
				<swiper-item>
					<image src="https://dcdn.it120.cc/2022/01/26/f510de91-1824-4ef5-8457-11e115fb6743.jpeg" mode="">
					</image>
				</swiper-item>
				<swiper-item>
					<image src="https://dcdn.it120.cc/2022/01/26/02235d13-1ea8-4cd1-af00-1b219b5b07f9.jpeg" mode="">
					</image>
				</swiper-item>
				<uni-section title="查看更多"
					subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标" type="line">
					<uni-notice-bar show-get-more show-icon text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
						@getmore="getMore" />
					<uni-notice-bar show-get-more show-icon more-text="查看更多"
						text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
				</uni-section>
			</swiper>

		</view>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_top">
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/92df8746-6558-43eb-adc1-d4704357292c.png" mode="">
						</image>
					</view>
					<text>年货</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/73f90e52-001b-4c2a-bc4d-9fdae263bfeb.jpeg" mode="">
						</image>
					</view>
					<text>图书</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/3a3aa946-5b65-4bf5-bf5b-9918d5a6352f.jpeg" mode="">
						</image>
					</view>
					<text>休闲零食</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/c7c93ec2-fbcb-4244-9ddb-95ca2ff3d55c.jpeg" mode="">
						</image>
					</view>
					<text>食用油</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/90bfd343-1aa2-4cb3-bede-e9fd0f7af077.jpeg" mode="">
						</image>
					</view>
					<text>榨汁机</text>
				</view>
			</view>
			<!-- 每一项导航 -->
			<view class="nav_bottom">
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/36835dae-1daf-4cd8-8f6a-7aab92ebd5c3.jpeg" mode="">
						</image>
					</view>
					<text>吃鸡装备</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/4e5a20f2-8b3a-4e5a-a4c5-7a9626da9f4c.jpeg" mode="">
						</image>
					</view>
					<text>亲子玩具</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/6997b7c5-d31c-4dac-b1b2-d6661d2d44c7.jpeg" mode="">
						</image>
					</view>
					<text>家纺</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/6090764b-1d7b-4339-8041-874a089213c4.jpeg" mode="">
						</image>
					</view>
					<text>实木家具</text>
				</view>
				<view class="nav_item">
					<!--图标 -->
					<view>
						<image src="https://dcdn.it120.cc/2022/01/26/dbeae012-0104-4f4f-9048-80b26403c0b9.jpeg" mode="">
						</image>
					</view>
					<text>美妆</text>
				</view>
			</view>

		</view>
		<!-- 文字滚动框 -->
		<view class="gundong">
			<uni-section title="" subTitle="" type="">
				<uni-notice-bar show-icon scrollable show-get-more text="商城新开张,优惠多多  戳  戳  戳  我看详情." />
			</uni-section>
		</view>
		<!-- 商品列表文字 -->
		<view class="texts">
			<view></view>
			<text>
				<text></text>
				商品列表
			</text>
			<view></view>
		</view>
		<!-- 商品列表 -->
		<view class="lists">

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/jfs/t1/146404/35/20798/287818/6194c77dE46c38f05/079615af08a7126f.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
					<uni-badge text="京东自营"></uni-badge>
					<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">

					<text>5174</text>
				</view>
			</view>

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/152226/32/6509/99354/5fb62cf3E1f61263f/f3e2625755dc1fc8.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">

					<text>5174</text>
				</view>
			</view>

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/56435/10/9081/326459/5d66432aEf7680bf0/7a85c34318c89cb9.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">
					<text>5174</text>
				</view>
			</view>

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/42415/37/16454/289619/60f043bcE89ef2ece/ebf214a95b1fb9ee.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">
					<text>5174</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		methods: {

		},
		// 下拉刷新关闭
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		}
	}
</script>

<style lang="scss">
	// 轮播图样式
	.home {
		margin: auto;

		swiper {
			// 注意单位：750rpx是占据一个整屏，类似于rem是一个相对单位
			// 注意UI：一般建议搞图在375px的2倍图   这样直接可以将图直接转成rpx沾满整屏
			width: 750rpx;
			height: 375rpx;

			image {
				width: 750rpx;
				height: 375rpx;
			}
		}
	}

	// 导航区域
	.nav {
		width: 700rpx;
		height: 362rpx;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 0rpx 5rpx #EBEEF5;

		.nav_top {
			flex: 1;
			display: flex;
			margin-top: 40rpx;
			margin-left: 10rpx;

			.nav_item {
				// flex: 1;
				width: 141rpx;
				height: 141rpx;
				justify-content: space-between;
				align-content: space-between;
				display: flex;
				flex-wrap: wrap;
				text-align: center;

				text {
					margin-left: 20rpx;
					font-size: 24rpx;
				}

				view {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}

		.nav_bottom {
			flex: 1;
			display: flex;
			margin-top: 30rpx;
			margin-left: 10rpx;

			.nav_item {
				// flex: 1;
				width: 141rpx;
				height: 141rpx;
				text-align: center;
				justify-content: space-between;
				align-content: space-between;
				display: flex;
				flex-wrap: wrap;

				text {
					margin-left: 20rpx;
					font-size: 24rpx;
				}

				view {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}
	}

	// 滚动区域
	.gundong {
		margin-top: -15rpx;
	}

	// 商品列表文字


	/* 商品列表  */
	.texts {
		margin: 48rpx 0 28rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			color: #161616;
			font-weight: 500;
			font-size: 30rpx;
			padding: 0 24rpx;
		}

		view {
			width: 290rpx;
			height: 1rpx;
			border-radius: 3rpx;

			&:first-of-type {
				// background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
				background: rgb(197, 197, 197);
			}

			&:last-of-type {
				background: rgb(197, 197, 197);
			}
		}

		text {
			position: relative;

			text {
				position: absolute;
				top: -10rpx;
				left: -30rpx;
				width: 15rpx;
				height: 50rpx;
				box-sizing: border-box;
			}
		}
	}

	// 商品列数
	.lists {
		padding: 0 22px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.lists_item {
			width: 341rpx;
			height: 528rpx;
			border: 1px solid #8F939C;
			margin-bottom: 20px;

			text {
				font-size: 28px;
			}

			image {
				width: 339rpx;
				height: 339rpx
			}

			.RMB {
				text {
					padding: 10px 0 0 30px;
					font-size: 38rpx;
					color: #E63340;
					margin-top: 10px;
				}

			}
		}
	}

	.big {
		position: relative;

		.Shopping {
			position: fixed;
			width: 60rpx;
			height: 60rpx;
			background-color: #4CD964;
			z-index: 1;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
